import { ref } from 'vue';
import gsap from 'gsap';
import { sleep } from '@/utils/sleep.js';
import { useHeaderBusBeforeRouteTo } from '@/components/CommonFooter/headerBus.js';
import { panelToggle } from '@/utils/panelToggle.js';

export function usePageFade() {
  const pageDom = ref();

  const fadePage = (duration = 0.65) => {
    const obj = { opacity: 1 };
    gsap.to(obj, {
      opacity: 0.1,
      duration,
      onUpdate() {
        if (pageDom.value) {
          pageDom.value.style.opacity = `${obj.opacity}`;
        }
      }
    });
  };

  const onLeaveBefore = async () => {
    fadePage();
    await panelToggle.hidePanel();
    await sleep(650);
  };

  // 使用头部总线监听路由跳转前事件，并传入离开前的处理函数
  useHeaderBusBeforeRouteTo(onLeaveBefore);

  return {
    pageDom
  };
}
